<template>
  <view class="page-container">
    <!-- 头部信息 -->
    <view class="header">
      <view class="avatar-section">
        <image class="avatar" :src="nurseData.avatar" mode="aspectFill"></image>
        <view class="info">
          <text class="name">{{ nurseData.name }}</text>
          <text class="title">{{ nurseData.title }}</text>
          <view class="tags">
            <text v-if="nurseData.isVerified" class="tag">实名认证</text>
            <text v-if="nurseData.isLicensed" class="tag">执业认证</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 核心履历卡片 -->
    <view class="card resume-card">
      <view class="card-title">专业履历</view>
      
      <!-- 从业信息 -->
      <view class="info-row">
        <image class="icon" src="/static/icons/calendar.png"></image>
        <view class="info-content">
          <text class="label">从业时间：</text>
          <text class="value">{{ nurseData.experience }}年</text>
        </view>
      </view>
      
      <!-- 最高职称 -->
      <view class="info-row">
        <image class="icon" src="/static/icons/badge.png"></image>
        <view class="info-content">
          <text class="label">最高职称：</text>
          <text class="value">{{ nurseData.highestTitle }}</text>
        </view>
      </view>
      
      <!-- 当前医院 -->
      <view class="info-row">
        <image class="icon" src="/static/icons/hospital.png"></image>
        <view class="info-content">
          <text class="label">当前医院：</text>
          <text class="value">{{ nurseData.hospital }}</text>
        </view>
      </view>
    </view>

    <!-- 技能专长 -->
    <view class="card skills-card">
      <view class="card-title">专业技能</view>
      <view class="skill-tags">
        <view 
          v-for="(skill, index) in nurseData.skills" 
          :key="index" 
          class="skill-tag"
          :style="{ background: getTagColor(index) }"
        >
          {{ skill }}
        </view>
      </view>
    </view>

    <!-- 荣誉成就 -->
    <view class="card honors-card">
      <view class="card-title">荣誉成就</view>
      <view class="honors-container">
  <!--      <view class="honor-item" v-for="(honor, index) in nurseData.honors" :key="index">
          <text class="honor-year">{{ honor.year }}</text>
          <text class="honor-name">{{ honor.name }}</text>
        </view> -->
		    <text class="value">{{ nurseData.honors }}</text>
      </view>
    </view>

    <!-- 服务项目 -->
    <view class="card services-card">
      <view class="card-title">服务项目</view>
      <view class="service-list">
        <view 
          class="service-item" 
          v-for="(service, index) in nurseData.services" 
          :key="index" @click="navToDetails(service)"
        >
          <image class="service-icon" :src="service.picImg"></image>
          <view class="service-info">
            <text class="service-name">{{ service.proName }}</text>
            <text class="service-desc">{{ service.sketch }}</text>
          </view>
          <text class="price">{{ service.actualPrice }}元/次</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import * as hospitalInfo from "../../common/api/hospitalInfo.js";
export default {
  data() {
    return {
      nurseData: {
        avatar: '',
		nurseId:'',
        name: '',
        title: '',
        isVerified: true,
        isLicensed: true,
        experience: '',
        highestTitle: '',
        hospital: '',
        skills: [
          // { name: 'PICC置管', level: '精通' },
          // { name: '伤口护理', level: '专家' },
          // { name: '老年护理', level: '精通' },
          // { name: '母婴护理', level: '高级' },
          // { name: '急症处理', level: '专家' }
        ],
        honors: '',
        services: [
          // {
          //   name: '居家护理服务',
          //   icon: '/static/icons/homecare.png',
          //   description: '为行动不便患者提供专业居家护理',
          //   price: 168
          // },
          // {
          //   name: '伤口护理服务',
          //   icon: '/static/icons/wound.png',
          //   description: '各类手术及慢性伤口专业护理',
          //   price: 198
          // },
          // {
          //   name: '母婴护理服务',
          //   icon: '/static/icons/maternal.png',
          //   description: '新生儿及产妇专业护理',
          //   price: 228
          // },
          // {
          //   name: '健康咨询服务',
          //   icon: '/static/icons/consult.png',
          //   description: '疾病预防与健康管理专业咨询',
          //   price: 88
          // }
        ]
      }
    }
  },
  
  onLoad(opt) {
  	  if(opt.NurseName){
  	  	this.name = opt.NurseName
  	  	this.getDeviceInfo()
  	  }
  },
  methods: {
    getTagColor(index) {
      const colors = ['#E8F5E9', '#E3F2FD', '#FFECB3', '#FFCCBC', '#F3E5F5'];
      return colors[index % colors.length];
    },
	navToDetails(service) {
				uni.navigateTo({
					url:"/patientAppPages/pages/serviceDetails/serviceDetails?uid=" +service.projectsUid+"&hospitalUid="+this.nurseData.nurseId+"&hospitalName="+this.nurseData.name+"&type="+"护士"})
			},
	getDeviceInfo() {
		const param = {
			name:this.name
		}
		hospitalInfo.selectMedcalProject(
			param).then(result => {
			this.nurseData.nurseId = result.data.data.uid || []
			this.nurseData.avatar = result.data.data.pictureName || []
			this.nurseData.name = result.data.data.nurseName || []
			this.nurseData.title = result.data.data.positionalTitles || []
			this.nurseData.experience = result.data.data.practiseMedicineTime || []
			this.nurseData.highestTitle = result.data.data.positionalTitles || []
			this.nurseData.hospital = result.data.data.hospitalName || []
			this.nurseData.skills = result.data.data.skill || []
			this.nurseData.services = result.data.data.medicalProjectsDOList || []
			this.nurseData.honors = result.data.data.profiles || []
				
		}).catch(error => {
			console.log(error);
		})
	}
  }
}
</script>

<style lang="scss">
.page-container {
  padding: 20rpx;
  background-color: #f8f9fa;
}

/* 头部样式 */
.header {
  padding: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
}

.avatar-section {
  display: flex;
  align-items: center;
}

.avatar {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
  border: 4rpx solid #e3f2fd;
}

.info {
  margin-left: 30rpx;
}

.name {
  font-size: 40rpx;
  font-weight: bold;
  color: #1a237e;
  display: block;
}

.title {
  font-size: 32rpx;
  color: #5c6bc0;
  margin-top: 10rpx;
  display: block;
}

.tags {
  margin-top: 15rpx;
}

.tag {
  font-size: 24rpx;
  color: #fff;
  background-color: #4caf50;
  padding: 6rpx 16rpx;
  border-radius: 30rpx;
  margin-right: 10rpx;
}

/* 通用卡片样式 */
.card {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.card-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

/* 履历信息行 */
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 25rpx;
}

.icon {
  width: 50rpx;
  height: 50rpx;
  margin-right: 20rpx;
}

.info-content {
  flex: 1;
}

.label {
  font-size: 28rpx;
  color: #666;
}

.value {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
}

/* 技能标签 */
.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.skill-tag {
  padding: 12rpx 24rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  color: #333;
}

/* 荣誉列表 */
.honors-container {
  padding: 10rpx 0;
}

.honor-item {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.honor-year {
  display: inline-block;
  width: 120rpx;
  font-size: 30rpx;
  color: #e91e63;
  font-weight: 500;
}

.honor-name {
  font-size: 28rpx;
  color: #333;
}

/* 服务项目 */
.service-item {
  display: flex;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.service-icon {
  width: 60rpx;
  height: 60rpx;
  margin-right: 20rpx;
}

.service-info {
  flex: 1;
}

.service-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #1a237e;
}

.service-desc {
  font-size: 26rpx;
  color: #666;
  margin-top: 8rpx;
  display: block;
}

.price {
  font-size: 32rpx;
  font-weight: bold;
  color: #e91e63;
}
</style>
